<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>コントロールパネル</title>
    
    <link href="./assets/styles/default.css" rel="stylesheet" />
    <link href="./assets/styles/page/banner_index.css" rel="stylesheet" />
    <link href="./assets/styles/plugins/fullcalendar.css" rel="stylesheet" />
    <script src="./assets/scripts/libs/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="./assets/scripts/plugins/jqueryAutoHeight.js" type="text/javascript"></script>
    <script src="./assets/scripts/import.js" type="text/javascript"></script>
    <script>
		$(function(){
			
			var es =[
					{foreach from=$thisMonth key=k item=v}
						{foreach from=$v.banner key=kk item=vv}
							{	
								id : "{$kk}",
								title : "{$arrColumn[$kk]}",
								start : new Date({$year},{$month}-1,{$v.day}),
								allDay : true,
								className: {if $vv == '2'}"prep"{elseif $vv == '1'}"publ"{elseif $vv == '0'}"hide"{else}"none"{/if}
							},
						{/foreach}
					{/foreach}
					{}
				];
			

			var calendar = $('#fullcalendar').fullCalendar({
				contentHeight: 500,
				dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
				dayNamesShort: ['日','月','火','水','木','金','土'],
				header: {
					left: '',
					center: '',
					right: ''
				},
				titleFormat: {
					month: 'yyyy年 M月',
					week: '[yyyy年 ]M月 d日{ —[yyyy年 ][ M月] d日}',
					day: 'yyyy年 M月 d日 dddd'
				},
				buttonText: {
					today: '今日'
				},
				eventClick: function(calEvent, jsEvent, view) {
					var y = calEvent.start.getFullYear();
					var m = calEvent.start.getMonth()+1;
					var d = calEvent.start.getDate();
                                        if($(this).hasClass('none')){
                                            location.href = "banner.php?op=regist&y=" + y + "&m=" + m + "&d=" + d + "&b=" + calEvent.id;
                                        }else{
                                            location.href = "banner.php?op=edit&y=" + y + "&m=" + m + "&d=" + d + "&b=" + calEvent.id;
                                        }
				},
				eventMouseover : function(calEvent, jsEvent, view) {

					if($(this).hasClass('none')){
                                            return;
                                        }
					
					var y = calEvent.start.getFullYear();
					var m = calEvent.start.getMonth()+1;
					var d = calEvent.start.getDate();
					var thisthis = $(this);
					var url = "banner.php?op=preview&y=" + y + "&m=" + m + "&d=" + d + "&b=" + calEvent.id;
					$('#banner_preview').load(url,function(){
						var thisthisthis = $(this);
						var src = $(this).find('p').first().html();
						var num = $(this).find('p').size();
						if(typeof src != "undefined" && src != ""){
							$(this).html("").append('<img id="preview_img" src="' + src + '" />');
							if(num > 1){
                                                            $(this).append("<span>" + num + "枚</span>");
                                                        }
							$("#preview_img").load(function(){
								var x = thisthis.offset().left;
								var y = thisthis.offset().top-thisthisthis.height()-10;
								thisthisthis.css({ left:x+"px",top:y+"px" }).fadeIn(300);
							});
						}
					});
				},
				eventMouseout : function(calEvent, jsEvent, view) {
					$('#banner_preview').html("").hide();
				},
				events : es
			});
			
			calendar.fullCalendar("gotoDate", {$year},{$month-1},1);

			var items = "";
			$('.left1 .right a').click(function(){
				
				if(items == ""){
					for(var i=0; i < es.length-1; i++){
						
						if(items.indexOf(es[i].title + ":") == -1){
							items += es[i].title + ":";
							$('#list_view').append("<dl id='list" + es[i].id +"'><dt>" + es[i].title + "</dt></dl>");
						}
							
						if(es[i].className != "none"){
							var y = es[i].start.getFullYear();
							var m = es[i].start.getMonth()+1;
							var d = es[i].start.getDate();
							var date = y + "年" + m + "月" + d;
							
							var html = "<dd><a class='" + es[i].className + "' href='banner.php?op=edit&y=" + y + "&m=" + m + "&d=" + d + "&b=" + es[i].id + "'>";
							html +=  date + "日</a></dd>"
							
							$('#list_view #list' + es[i].id).append(html);
						}
					}
					$("#list_view dl").each(function(){
						if($('dd',this).size() == 0){
							$(this).append("<dd>予定なし</dd>");
						}
					});
					
					
					$("#list_view dl a").hover(
						function(){
							
							var date = $(this).text();
							var s = date.split("年");
							
							var y = s[0];
							var m = s[1].split("月")[0];
							var d = s[1].split("月")[1].replace("日","");
							var id = $(this).closest("dl").attr("id").replace("list","");
							
							var thisthis = $(this);
							$('#banner_preview').load("banner.php?op=preview&y=" + y + "&m=" + m + "&d=" + d + "&b=" + id,function(){
								var thisthisthis = $(this);
								var src = $(this).find('p').first().html();
								var num = $(this).find('p').size();
								if(typeof src != "undefined" && src != ""){
									$(this).html("").append('<img id="preview_img" src="' + src + '" />');
									if(num > 1){
                                                                            $(this).append("<span>" + num + "枚</span>");
                                                                        }
									$("#preview_img").load(function(){
										var x = thisthis.offset().left;
										var y = thisthis.offset().top-thisthisthis.height()-10;
										thisthisthis.css({ left:x+"px",top:y+"px" }).fadeIn(300);
									});
								}
							});
						},
						function(){
							$('#banner_preview').html("").hide();
						}
					);
					
				}
				
				$("#fullcalendar").hide();
				$("#list_view").show();
				$("#list_view dl").autoHeight({ column:4 });
				
			});
			
			$('.left1 .left a').click(function(){
				$("#fullcalendar").show();
				$("#list_view").hide();
			});

		});
	</script>
    
</head>
<body>

{include file='include/header.inc.html'}

<div id="container">
	<aside id="accordion">
    	<div id="aside_inner">
    		{include file='include/menu.inc.html'}
        </div>
    </aside>
    
    <article>
    	<h2><span>&nbsp;</span>Banner<p><a href="javascript:;">Open Plugins</a></p></h2>
        <nav>
        	<ul>
            	<li class="active"><a href="{$smarty.server.SCRIPT_NAME}"><span>スケジューラ</span></a></li>
            	<li><a href="banner_config.php"><span>種別マスタ</span></a></li>
			</ul>
        </nav>
        
        <section id="content">
        	<h3>スケジューラ</h3>

            <ul class="btns fc left1 activemenu">
                <li class="btn left c"><a href="javascript:;" class="active">カレンダー表示</a></li>
                <li class="btn right c"><a href="javascript:;">リスト表示</a></li>
            </ul>
            
            <ul class="btns fc left2">
                <li class="btn_m left c"><a href="{$smarty.server.SCRIPT_NAME}?y={$year_prev}&m={$month_prev}">≪{$month_prev}月</a></li>
                <li class="btn_m center c"><a href="{$smarty.server.SCRIPT_NAME}"><span class="cal_btn_now">今月</span></a></li>
                <li class="btn_m right c"><a href="{$smarty.server.SCRIPT_NAME}?y={$year_next}&m={$month_next}">{$month_next}月≫</a></li>
            </ul>
            
            <p class="thismonth">{$year}年{$month}月</p>
            
            <div class="exp fc">
            	<p>
                	<span class="publ">&nbsp;</span> 公開　
                	<span class="prep">&nbsp;</span> 仮登録　
                	<span class="hide">&nbsp;</span> 非公開
                </p>
            </div>
            
            <div id="list_view" class="display-none"></div>
            <div id="fullcalendar"></div>            
	     </section>
    </article>
</div>

<div id="banner_preview"></div>

{include file='include/footer.inc.html'}

</body>
</html>